import React, { Component } from 'react'
import navCss from './css/nav.module.css';
import Login from '../login/index'
import axios from "axios"
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

export default class Nav extends Component {
    state = {
        index: 0,
        url:["/","/info","/","/","/collections","/navigation","/"],
        navData: ['首页', '资讯', '深度', '招聘', '专题', '导航', '生态图'],
        isLoginClick:false,
        isLogin:false,
        temp:0,
    }
    componentDidMount(){
        const user=window.JSON.parse(window.localStorage.getItem("user")) ;
        console.log(user);
        if(user){
            this.setState({isLogin:true,...user});

        }

    }
    render() {

        const click = (index) => {
      
            return () => {
                this.setState({ index });

            }
        }
        const isClick = (index) => {
            if (index == this.state.index) {
                return navCss.navBottom
            }

        }
        const login=()=>{
            this.setState({isLoginClick:true})
        }
        const register=()=>{
            this.setState({isLoginClick:true})

        }
        const isLoginClickFn=()=>{
            this.setState({isLoginClick:false})
            const user=window.JSON.parse(window.localStorage.getItem("user")) ;
            console.log(user);
            if(user){
                this.setState({isLogin:true,...user});
    
            }
        }
        const mask=()=>{
            if(this.state.isLoginClick){
                return <Login fn={isLoginClickFn} />;
            }
        }
        const unLogin=()=>{
            this.setState({isLogin:false});
            window.localStorage.removeItem("user")
        }
        const linkToUser=()=>{
            this.setState({})
        }
        const isLoginFn=()=>{

            if(!this.state.isLogin){
                return (<div className={navCss.login}>
                    <span onClick={login}>登录</span>
                    <span onClick={register}>注册</span>
                </div>)
            }else{
                return (
                    <div className={navCss.login}>
                        <Router>
                            <Link to="/user">
                            <img src={this.state.img} className={navCss.img} onClick={linkToUser} alt=""/>
                            </Link>
                            {/* <Link to='/'>首页</Link>
                            <Link to='/info'>资讯</Link>
                            <Link to='/'>深度</Link>
                            <Link to='/'>招聘</Link>
                            <Link to='/collections'>专题</Link>
                            <Link to='/navigation'>导航</Link>
                            <Link to='/'>生态图</Link> */}
                        </Router>
                    <span onClick={unLogin}>登出</span>
                </div>
                )
            }
        }
        return (
            <div>
                {mask()}
                {isLoginFn()}
                <div className={navCss.title}>
                    <img src="https://www.brandstar.com.cn/_nuxt/img/navbar-logo.33b1154.svg" alt='' className={navCss.logo}></img>

                </div>
                <div className={navCss.nav}>
                    {this.state.navData.map((item, index) => {
                        return (
                        <Router>
                            <Link to={this.state.url[index]}>
                        <span key={index} className={isClick(index)} onClick={click(index)} >{item}</span>
                        </Link>
                        </Router>
                        )
                    })}
                </div>
            </div>
        )
    }
}
